<!--
  * 首页
  *
  * @Author:    zhkj：lee
  * @Date:      2022-09-12 22:34:00
  * @Wechat:    lee
  * @Email:     zhkj@zhkj.com
  * @Copyright  zhkj （ https://www.zhkj.com ）
  *
-->
<template>

  <!--下方左右布局-->
  <a-row :gutter="[10, 10]">
    <!--左侧-->
    <a-col :span="24">
      <a-row :gutter="[10, 10]">

        <a-col :span="6">
          <HomeNotice title="报销单审核" :noticeTypeId="1" />
        </a-col>
        <a-col :span="6">
          <HomeNotice title="应付管理" :noticeTypeId="3" />
        </a-col>
        <a-col :span="6">
          <HomeNotice title="应收管理" :noticeTypeId="4" />
        </a-col>
        <a-col :span="6">
          <HomeNotice title="通知" :noticeTypeId="2" />
        </a-col>


        <a-col :span="5">
          <a-card size="small" title="总工单数(默认本月)" :bordered="false" style="font-weight:bolder">
            <div style="text-align: center;">
              <span style="font-size: 40px;font-weight:bolder;color: #2e75b6">10</span>
            </div>
          </a-card>
        </a-col>
        <!--企业动态-->
        <a-col :span="5">
          <a-card size="small" title="待处理工单" :bordered="false" style="height: 120px;font-weight:bolder">
            <div style="text-align: center;">
              <span style="font-size: 40px;font-weight:bolder;color: #2e75b6">3</span>
            </div>
          </a-card>
        </a-col>
        <a-col :span="5">
          <a-card size="small" title="处理中工单" :bordered="false" style="height: 120px;font-weight:bolder">
            <div style="text-align: center;">
              <span style="font-size: 40px;font-weight:bolder;color: #2e75b6">8</span>
            </div>
          </a-card>
        </a-col>
        <a-col :span="5">
          <a-card size="small" title="已完成工单" :bordered="false" style="height: 120px;font-weight:bolder">
            <div style="text-align: center;">
              <span style="font-size: 40px;font-weight:bolder;color: #2e75b6">8</span>
            </div>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card size="small" title="已关闭工单" :bordered="false" style="height: 120px;font-weight:bolder">
            <div style="text-align: center;">
              <span style="font-size: 40px;font-weight:bolder;color: #2e75b6">6</span>
            </div>
          </a-card>
        </a-col>

        <a-col :span="5">
          <a-card size="small" title="总任务" :bordered="false" style="font-weight:bolder">
            <div style="text-align: center;">
              <span style="font-size: 40px;font-weight:bolder;color: #2e75b6">4</span>
            </div>
          </a-card>
        </a-col>
        <!--企业动态-->
        <a-col :span="5">
          <a-card size="small" title="已分派任务" :bordered="false" style="height: 120px;font-weight:bolder">
            <div style="text-align: center;">
              <span style="font-size: 40px;font-weight:bolder;color: #2e75b6">5</span>
            </div>
          </a-card>
        </a-col>
        <a-col :span="5">
          <a-card size="small" title="处理中任务" :bordered="false" style="height: 120px;font-weight:bolder">
            <div style="text-align: center;">
              <span style="font-size: 40px;font-weight:bolder;color: #2e75b6">1</span>
            </div>
          </a-card>
        </a-col>
        <a-col :span="5">
          <a-card size="small" title="已完成任务" :bordered="false" style="height: 120px;font-weight:bolder">
            <div style="text-align: center;">
              <span style="font-size: 40px;font-weight:bolder;color: #2e75b6">3</span>
            </div>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card size="small" title="任务完成率" :bordered="false" style="height: 120px;font-weight:bolder">
            <div style="text-align: center;">
              <span style="font-size: 40px;font-weight:bolder;color: #2e75b6">50%</span>
            </div>
          </a-card>
        </a-col>


        <a-col :span="12">
          <Pie />
        </a-col>
        <a-col :span="12">
          <Category />
        </a-col>

        <a-col :span="12">
          <Pie2 />
        </a-col>
        <a-col :span="12">
          <Category2 />
        </a-col>

        <a-col :span="12">
          <Task />
        </a-col>
        <a-col :span="12">
          <DelayTask />
        </a-col>
      </a-row>
    </a-col>

  </a-row>


</template>
<script setup>
import { computed, nextTick, h } from 'vue';
import HomeHeader from './home-header.vue';
import HomeNotice from './home-notice.vue';
import HomeQuickEntry from './components/quick-entry/home-quick-entry.vue';
import OfficialAccountCard from './components/official-account-card.vue';
import ToBeDoneCard from './components/to-be-done-card.vue';
import ChangelogCard from './components/changelog-card.vue';
import Gauge from './components/echarts/gauge.vue';
import Category from './components/echarts/category.vue';
import Category2 from './components/echarts/category2.vue';
import Pie from './components/echarts/pie.vue';
import Pie2 from './components/echarts/pie2.vue';
//import Gradient from './components/echarts/gradient.vue';
import { Modal } from 'ant-design-vue';
import Task from "/@/views/system/home/components/Task.vue";
import DelayTask from "/@/views/system/home/components/echarts/DelayTask.vue";

// 业绩完成百分比
const saleTargetPercent = computed(() => {
  return 75;
});


</script>
<style lang="less" scoped>
@import './index.less';
</style>
